<template>
    <div v-if="!$store.state.user.pulling_info">
        <div class="ccover">
                <div class="top">
                    <div class="row justify-content-md-center">
                    <div class="col-8">
                        <form @submit.prevent="login">
                            <div class="mb-3">
                                <div for="username" class="form-label">用户名</div>
                                <input v-model="username" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="请输入用户名">
                            </div>
                            <div class="mb-3">
                                <div for="exampleInputPassword1" class="form-label">密码</div>
                                <input v-model="password" type="password" class="form-control" id="exampleInputPassword1" aria-describedby="请输入密码">
                            </div>
                            <div class="error">{{ error_message }}</div>
                            <button type="submit" class="btn btn-dark">登录</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import { ref } from "vue";
  import { useStore } from "vuex";
  import router from "@/router";
  
  export default{
 
      setup(){
          const store = useStore();
          let username = ref("");
          let password = ref("");
          let error_message = ref("");

          const jwt_token = localStorage.getItem("jwt_token");
          if(jwt_token){
              store.commit("updateToken",jwt_token);
              store.dispatch("getinfo",{
                  success(){
                      router.push({name:"home"})
                      store.commit("updatePullInfo",false);
                  },
                  error(){
                      store.commit("updatePullInfo",false);
                  }
              })
          }else{
              store.commit("updatePullInfo",false);
          }
          const login= ()=>{
              error_message.value = '';
              store.dispatch("login",{
                  username:username.value,
                  password:password.value,
                  success(){
                      store.dispatch("getinfo",{
                          success(){
                              router.push({name:"home"})
                          },
                          error(){
                          error_message.value = "用户名和密码有误";
                      }
                      })
                  },
                  error(){
                      error_message.value = "用户名和密码有误";
                  }
                  
              })
          };
  
          return {
              username,
              password,
              error_message,
              login,
          }
      }
  
  }
  </script>
  
  <style scoped>
.ccover{
    width: 100%;
    height: 91vh;
    float: left;
    background-image: url("../assets/img/R-C\ \(1\).jpg"); 
    background-size: cover; /* 图片会缩放以完全覆盖div，但可能会被裁剪 */  
    background-position: center; /* 图片居中显示 */  
    background-repeat: no-repeat; /* 图片不重复 */  
}
  .top{
    margin-bottom: 20vh;
    margin-top: 20vh;
    width: 30vw;
    height: 40vh;
    margin-left: 60vw;
    border-radius: 15%;
    background-color: rgba(255,255,255,70%);
  }
  .col-8{
    margin-top: 5vh;
  }
  button{
      width: 100%;
  }
  div.error{
      color: red;
  }
  
  </style>